<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>01-案例-拼接名字-计算属性</title>
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script type="text/javascript" src="../VueJs/vue.js"></script>
    <style>
        .container {
            width: 350px;
        }
        p {
            width: 350px;
            padding: 20px;
            line-height: 32px;
            font-size: 20px;
        }
        .form-inline div label {
            display: flex;
            align-items: center;
        }
        .form-inline div label span {
            width: 50px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h3>拼接名字-使用计算属性</h3>
            <hr>
            <form action="#" class="form-inline">
                <div class="form-group">
                    <label>
                        <span>姓氏：</span>
                        <input type="text" class="form-control" v-model="firName">
                    </label>
                </div>
                <div class="form-group">
                    <label>
                        <span>名称：</span>
                        <input type="text" class="form-control" v-model="lastName">
                    </label>
                </div>
            </form>
            <p class="bg-success">{{ fullName }}</p>
        </div>
    </div>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
    
        const vm = new Vue({
            el: '#app',
            data: {
                firName: '',
                lastName: ''
            },
            // 计算属性
            computed: {
                fullName: {
                    get() {
                        let a
                        let b
                        
                        setTimeout(() => {
                            a = this.firName && this.firName[0].toUpperCase() + this.firName.slice(1)
                            b = this.lastName && this.lastName[0].toUpperCase() + this.lastName.slice(1)
                        }, 1000)

                        return `${a} - ${b}`
                    }
                }
            }
        })
    </script>
</body>
</html>